<template>
  <div class="bar_graph">
    <!-- <div class="zb">{{ zb }}</div>
    <div class="one">-100</div>
    <div class="two">-50</div>
    <div class="three">0</div>
    <div class="four">
      <span>600</span>
      <span style="margin-left: 60%">700</span>
    </div>
    <div class="bottom">总量程：800</div>
    <div class="pointer">-50</div> -->

    <!-- :style="{width: Math.abs(config.warningNegative) / config.totalRange * 100 + '%'}" -->
    <!-- <div class="zb">{{ zb }}</div>
    <div class="one">{{config.thresholdNegative}}</div>
    <div class="two">{{config.warningNegative}}</div>
    <div class="three">0</div>
    <div class="four">
      <span>{{config.warningPositive}}</span>
      <span style="margin-left: 60%">{{config.thresholdPositive}}</span>
    </div>
    <div class="bottom">总量程：{{config.totalRange}}</div>
    <div class="pointer">{{config.current}}</div> -->

    <div class="zb">{{ zb }}</div>

    <!-- <div class="one"
      :style="{width: Math.abs(config.thresholdNegative) / config.totalRange * 100 + '%',  backgroundColor: bgColor == 4.5 ? 'red' : '#fff'}">
      <span class="one_span">{{config.thresholdNegative}}</span>
      <div class="one_box" v-if="bgColor == 4"
        :style="{right: Math.abs(config.warningNegative) / Math.abs(config.thresholdNegative) * 100 + '%', width: (Math.floor(Math.abs(config.current)) - Math.abs(config.warningNegative)) / Math.abs(config.thresholdNegative) * 100  + '%'}">
      </div>
      <div class="one_box" v-if="bgColor == 7" style="width: 100%;background: red;">
      </div>
      <div class="two"
        :style="{width: Math.abs(config.warningNegative) / Math.abs(config.thresholdNegative) * 100 + '%', backgroundColor: bgColor == 3.5 ? 'yellow' : '#fff'}">
        <span>{{config.warningNegative}}</span>
        <div class="two_box" v-if="bgColor == 3 || bgColor == 4"
          :style="{width: bgColor == 3 ? Math.floor(Math.abs(config.current)) / Math.abs(config.warningNegative) * 100 + '%' : bgColor == 4 ? '100%' : 0,backgroundColor: bgColor == 3 ? 'yellow' : bgColor == 4 ? 'red' : ''}">
        </div>
        <div class="two_box" v-if="bgColor == 7" style="width: 100%;background: red;">
        </div>
      </div>
    </div>

    <div class="three"
      :style="{width: config.thresholdPositive / config.totalRange * 100 + '%',backgroundColor: bgColor == 1.5 ? 'yellowgreen' : '#fff'}">
      <span>0</span>
      <div class="three_box" v-if="bgColor == 1 || bgColor == 2"
        :style="{width: bgColor == 1 ? Math.floor(config.current) / Math.floor(config.thresholdPositive) * 100 + '%' : bgColor == 2 ? '100%' : '', backgroundColor: bgColor == 1 ? 'yellowgreen' : bgColor == 2 ? 'yellow' : ''}">
        <span>0</span>
      </div>
      <div class="three_box" v-if="bgColor == 6" style="width: 100%;background: red;">
        <span>0</span>
      </div>
      <div class="four"
        :style="{width: (config.thresholdPositive - config.warningPositive) / config.thresholdPositive * 100 + '%',  backgroundColor: bgColor == 2.5 ? 'red' : '#fff'}">
        <span>{{config.warningPositive}}</span>
        <div class="four_box" v-if="bgColor == 2"
          :style="{width: Math.floor(config.current - config.warningPositive) / Math.floor(config.thresholdPositive - config.warningPositive) * 100 + '%', background: 'yellow'}">
          <span>{{config.warningPositive}}</span>
        </div>
        <div class="four_box" v-if="bgColor == 6" style="width: 100%;background: red;">
          <span>{{config.warningPositive}}</span>
        </div>
        <span style="margin-left: 100%">{{config.thresholdPositive}}</span>
      </div>
    </div> -->

    <template v-if="config.direction == 1">
      <div class="one"
        :style="{width: Math.abs(config.thresholdNegative) / config.totalRange * 100 + '%',  backgroundColor: bgColor == 4.5 ? 'red' : '#fff'}">
        <span class="one_span">{{config.thresholdNegative}}</span>
        <div class="one_box" v-if="bgColor == 4"
          :style="{right: Math.abs(config.warningNegative) / Math.abs(config.thresholdNegative) * 100 + '%', width: (Math.round(Math.abs(config.current)) - Math.abs(config.warningNegative)) / Math.abs(config.thresholdNegative) * 100  + '%'}">
        </div>
        <div class="one_box" v-if="bgColor == 7" style="width: 100%;background: red;">
        </div>
        <div class="two"
          :style="{width: Math.abs(config.warningNegative) / Math.abs(config.thresholdNegative) * 100 + '%', backgroundColor: bgColor == 3.5 ? 'yellow' : '#fff'}">
          <span>{{config.warningNegative}}</span>
          <div class="two_box" v-if="bgColor == 3 || bgColor == 4 || bgColor == 30"
            :style="{width: bgColor == 3 || bgColor == 30 ? Math.round(Math.abs(config.current)) / Math.abs(config.warningNegative) * 100 + '%' : bgColor == 4 ? '100%' : 0,backgroundColor: bgColor == 3 ? 'yellow' : bgColor == 4 || bgColor == 30 ? 'red' : ''}">
          </div>
          <div class="two_box" v-if="bgColor == 7" style="width: 100%;background: red;">
          </div>
        </div>
      </div>
      <div class="three"
        :style="{width: config.thresholdPositive / config.totalRange * 100 + '%',backgroundColor: bgColor == 1.5 ? 'yellowgreen' : '#fff'}">
        <span>0</span>
        <div class="three_box" v-if="bgColor == 1 || bgColor == 2 || bgColor == 20"
          :style="{width: bgColor == 1 || bgColor == 20 ? Math.round(config.current) / Math.round(config.thresholdPositive) * 100 + '%' : bgColor == 2 ? '100%' : '', backgroundColor: bgColor == 1 ? 'yellowgreen' : (bgColor == 2 || bgColor == 20) ? 'yellow' : ''}">
          <span>0</span>
        </div>
        <div class="three_box" v-if="bgColor == 6" style="width: 100%;background: red;">
          <span>0</span>
        </div>
        <div class="four"
          :style="{width: (config.thresholdPositive - config.warningPositive) / config.thresholdPositive * 100 + '%',  backgroundColor: bgColor == 2.5 ? 'red' : '#fff'}">
          <span>{{config.warningPositive}}</span>
          <div class="four_box" v-if="bgColor == 2"
            :style="{width: Math.round(config.current - config.warningPositive) / Math.round(config.thresholdPositive - config.warningPositive) * 100 + '%', background: 'yellow'}">
            <span>{{config.warningPositive}}</span>
          </div>
          <div class="four_box" v-if="bgColor == 6" style="width: 100%;background: red;">
            <span>{{config.warningPositive}}</span>
          </div>
          <span style="margin-left: 100%">{{config.thresholdPositive}}</span>
        </div>
      </div>
    </template>
    <template v-if="config.direction == 0">
      <div class="one"
        :style="{width: Math.abs(config.thresholdNegative) / config.totalRange * 100 + '%',  backgroundColor: bgColor == 4.5 ? 'red' : '#fff'}">
        <span class="one_span">{{config.thresholdNegative}}</span>
        <div class="one_box" v-if="bgColor == 4"
          :style="{right: Math.abs(config.warningNegative) / Math.abs(config.thresholdNegative) * 100 + '%', width: (Math.round(Math.abs(config.current)) - Math.abs(config.warningNegative)) / Math.abs(config.thresholdNegative) * 100  + '%', background: 'yellow'}">
        </div>
        <div class="one_box" v-if="bgColor == 7" style="width: 100%;background: red;">
        </div>
        <div class="two"
          :style="{width: Math.abs(config.warningNegative) / Math.abs(config.thresholdNegative) * 100 + '%', backgroundColor: bgColor == 3.5 ? 'yellow' : '#fff'}">
          <span>{{config.warningNegative}}</span>
          <div class="two_box" v-if="bgColor == 3 || bgColor == 4 || bgColor == 30"
            :style="{width: bgColor == 3 ? Math.round(Math.abs(config.current)) / Math.abs(config.warningNegative) * 100 + '%' : bgColor == 4 || bgColor==30 ? '100%' : 0,backgroundColor: bgColor == 3 ? 'yellowgreen' : bgColor == 4 || bgColor == 30 ? 'yellow' : ''}">
          </div>
          <div class="two_box" v-if="bgColor == 7" style="width: 100%;background: red;">
          </div>
        </div>
      </div>
      <div class="three"
        :style="{width: config.thresholdPositive / config.totalRange * 100 + '%',backgroundColor: bgColor == 1.5 ? 'yellow' : '#fff'}">
        <span>0</span>
        <div class="three_box" v-if="bgColor == 1 || bgColor == 2 || bgColor == 20" :style="{width: bgColor == 1 ? Math.round(config.current) / Math.round(config.thresholdPositive) * 100 + '%' : bgColor == 2 || bgColor == 20 ? '100%' : '', backgroundColor: bgColor == 1 ? 'yellow' : bgColor == 2 
          || bgColor == 20 ? 'red' : ''}">
          <span>0</span>
        </div>
        <div class="three_box" v-if="bgColor == 6" style="width: 100%;background: red;">
          <span>0</span>
        </div>
        <div class="four"
          :style="{width: (config.thresholdPositive - config.warningPositive) / config.thresholdPositive * 100 + '%',  backgroundColor: bgColor == 2.5 ? 'red' : '#fff'}">
          <span>{{config.warningPositive}}</span>
          <div class="four_box" v-if="bgColor == 2"
            :style="{width: Math.round(config.current - config.warningPositive) / Math.round(config.thresholdPositive - config.warningPositive) * 100 + '%', background: 'red'}">
            <span>{{config.warningPositive}}</span>
          </div>
          <div class="four_box" v-if="bgColor == 6" style="width: 100%;background: red;">
            <span>{{config.warningPositive}}</span>
          </div>
          <span style="margin-left: 100%">{{config.thresholdPositive}}</span>
        </div>
      </div>
    </template>

    <div class="bottom">总量程：{{config.totalRange}}</div>
    <div class="pointer" :style="{left: currentLeft}">{{Math.round(config.current)}}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentLeft: "",
        bgColor: "",
      }
    },
    props: {
      zb: {
        type: String,
        require: true
      },
      config: {
        type: Object,
        require: true
      }
    },
    watch: {
      config: {
        handler(val) {
          // 折线图
          const { thresholdNegative, current, totalRange, warningNegative, warningPositive, thresholdPositive, direction } = val;
          // if (current < 0) {
          //   const num1 = Math.floor(Math.abs(thresholdNegative) - Math.floor(Math.abs(current)));
          //   this.currentLeft = Math.floor(num1 / totalRange * 100) + "%";
          //   if (Math.floor(current) <= thresholdNegative) {
          //     this.currentLeft = "0";
          //   }
          // } else if (current > 0) {
          //   const num1 = Math.floor(Math.floor(current) + Math.abs(thresholdNegative));
          //   this.currentLeft = Math.floor(num1 / totalRange * 100) + "%";
          //   if (Math.floor(current) >= thresholdPositive) {
          //     this.currentLeft = "100%";
          //   }
          // } else if (current == 0) {
          //   this.currentLeft = Math.abs(thresholdNegative) / totalRange * 100 + "%";
          // }

          if (current < 0) {
            const num1 = Math.abs(thresholdNegative) - Math.abs(current)
            this.currentLeft = num1 / totalRange * 100 + "%";
            if (current <= thresholdNegative) {
              this.currentLeft = "0";
            }
          } else if (current > 0) {
            const num1 = current + Math.abs(thresholdNegative)
            this.currentLeft = num1 / totalRange * 100 + "%";
            if (current >= thresholdPositive) {
              this.currentLeft = "100%";
            }
          } else if (current == 0) {
            this.currentLeft = Math.abs(thresholdNegative) / totalRange * 100 + "%";
          }

          console.log("膨胀方向", direction);

          // 判断当前值 改变图表颜色
          if (Math.round(current) == 0) {
            this.bgColor = 0;
          } else if (Math.round(current) > 0 && Math.round(current) < warningPositive) {//零点到正向阈值
            this.bgColor = 1;
          } else if (Math.round(current) == warningPositive) {//等于正向量程
            this.bgColor = 20
          } else if (Math.round(current) > warningPositive && Math.round(current) < thresholdPositive) {//正向阈值到正向量程
            this.bgColor = 2;
          } else if (Math.round(current) >= thresholdPositive) {
            this.bgColor = 6;
          } else if (Math.round(current) < 0 && Math.round(current) > warningNegative) {//零点到反向阈值
            this.bgColor = 3;
          } else if (Math.round(current) == warningNegative) {
            this.bgColor = 30
          } else if (Math.round(current) > thresholdNegative && Math.round(current) < warningNegative) {//反向阈值到反向量程
            this.bgColor = 4;
          } else if (Math.round(current) <= thresholdNegative) {
            this.bgColor = 7;
          }
        },
        deep: true,
        immediate: true,
      }
    }
  };
</script>

<style scoped>
  .bar_graph {
    width: 400px;
    height: 25px;
    /* border: 1px solid #000; */
    display: flex;
    position: relative;
    user-select: none;
    margin: 40px 50px;
    border: 1px solid #000;
    /* border-right: 0; */
  }

  .bar_graph div {
    box-sizing: border-box;
  }

  .one {
    width: 25%;
    line-height: 25px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    border-right: 1px solid #000;
    position: relative;
  }

  .one .one_span {
    margin-left: -30px;
  }

  .one .one_box {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: red;
  }

  .two {
    width: 35%;
    line-height: 25px;
    height: 100%;
    color: #000;
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    border-left: 1px solid #000;
    position: relative;
  }

  .two span {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
  }

  .two .two_box {
    width: 50%;
    height: 100%;
    position: absolute;
    background-color: yellow;
    right: 0;
    top: 0;
  }

  .three {
    width: 25%;
    height: 100%;
    line-height: 25px;
    /* background-color: aquamarine; */
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    /* border-right: 1px solid #000; */
    position: relative;
  }

  .three .three_box {
    width: calc(50% - 2px);
    height: 100%;
    position: absolute;
    top: 0;
    left: -1;
    background-color: yellowgreen;
  }

  .four {
    width: 50%;
    height: 100%;
    line-height: 25px;
    /* background-color: aquamarine; */
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    border-left: 1px solid #000;
    position: relative;
  }

  .four .four_box {
    width: 50%;
    height: 100%;
    position: absolute;
    left: -1;
    top: 0;
    background-color: red;
  }

  .bottom {
    width: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -23px;
  }

  .pointer {
    width: 1px;
    height: 80px;
    background-color: tomato;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    color: red;
    font-weight: bold;
  }

  .zb {
    /* width: 150px; */
    position: absolute;
    font-size: 23px;
    font-weight: bold;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #eee;
    padding: 0 10px;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
  }
</style>